<template>
  <div class="app-wrapper app-table-wrapper">
    <div class="global-search-wrapper">
      <div class="search-item">
        <div class="left">
          <custom-button type="red" :disabled="disabled" @click="updateIsForceOffline(true)">强制下线</custom-button>
          <custom-button type="green" :disabled="disabled" @click="updateIsForceOffline(false)">恢复</custom-button>
        </div>
        <el-input
          v-model="keyword"
          class="primary-input margin-right-sm"
          placeholder="输入id/标题/作者用户名"
          clearable
          @keydown.enter.stop="fetchData"
        ></el-input>
      </div>
    </div>
    <el-table class="margin-top-lg" border row-key="id" :data="data" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="id" prop="id" align="center" />
      <el-table-column label="uuid" prop="uuid" align="center" />
      <el-table-column label="标题" prop="title" align="center" />
      <el-table-column label="缩略图" prop="coverImg" align="center">
        <template #default="{ row }">
          <el-link v-if="row.coverImg" type="primary" :href="row.coverImg" target="_blank">查看缩略图</el-link>
        </template>
      </el-table-column>
      <el-table-column label="作者用户名" prop="author" align="center" />
      <el-table-column label="是否模版" align="center">
        <template #default="{ row }">
          <span>{{ row.isTemplate ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="{ row }">
          <!-- 状态：0-删除 1-未发布 2-发布 3-管理员强制下线 -->
          <el-tag v-if="row.status === 0" type="danger" :effect="isDark ? 'dark' : 'light'">删除</el-tag>
          <el-tag v-else-if="row.status === 1" type="info" :effect="isDark ? 'dark' : 'light'">未发布</el-tag>
          <el-tag v-else-if="row.status === 2" type="success" :effect="isDark ? 'dark' : 'light'">已发布</el-tag>
          <el-tag v-else-if="row.status === 3" type="danger" :effect="isDark ? 'dark' : 'light'">强制下线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="查看网页" align="center">
        <template #default="{ row }">
          <el-link
            v-if="row.status === 1"
            :href="`${baseH5URL}/p/preview/${row.id}-${row.uuid}`"
            target="_blank"
            type="primary"
          >
            预览
          </el-link>
          <el-link
            v-else-if="row.status === 2"
            :href="`${baseH5URL}/p/${row.id}-${row.uuid}?channel=0`"
            target="_blank"
            type="primary"
          >
            线上链接
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" align="center" />
      <el-table-column label="最后发布时间" prop="latestPublishAt" align="center" />
    </el-table>
    <pagination
      v-model:size="searchParams.pageSize"
      v-model:page="searchParams.pageIndex"
      class="margin-top-lg"
      :total="total"
      @pagination="fetchData"
    />
  </div>
</template>

<script lang="ts" setup>
import { WorkDataProps } from '@/service/request'
import { fetchWorks, forceOffline, undoForceOffline } from '@/service/works'
import { ElMessage } from 'element-plus'
import { useGlobalStore } from '@/stores/global'

const baseH5URL = import.meta.env.VITE_BASE_H5_URL
const global = useGlobalStore()

const data = ref<WorkDataProps[]>([])
const total = ref(0)
const keyword = ref('')
const selectRows = ref<WorkDataProps[]>([])
const disabled = computed(() => selectRows.value.length === 0)
const isDark = computed(() => global.isDark)

const searchParams = computed(() => ({
  pageIndex: 1,
  pageSize: 10,
  keyword: keyword.value
}))

onMounted(async () => {
  await fetchData()
})

async function fetchData() {
  const { list, count } = await fetchWorks(searchParams.value)
  data.value = list
  total.value = count
}

function handleSelectionChange(list: WorkDataProps[]) {
  selectRows.value = [...list]
  console.log(selectRows.value)
}

async function updateIsForceOffline(isForceOffline = false) {
  const ids = selectRows.value
    .map(item => {
      return item.id
    })
    .join(',')
  if (isForceOffline) {
    await forceOffline({ ids })
    ElMessage.success('下线作品成功')
  } else {
    await undoForceOffline({ ids })
    ElMessage.success('恢复作品成功')
  }
  await fetchData()
}
</script>
<style lang="scss" scoped></style>
